<template>
    <div class="p-2" v-loading="loading">
        <searchrevealing>
            <el-form ref="queryFormRef" :model="queryParams" :inline="true" label-width="98px">
                <el-form-item label="创建时间" prop="time">
                    <el-date-picker value-format="YYYY-MM-DD" v-model="queryParams.time" type="daterange"
                        range-separator="~" start-placeholder="开始时间" end-placeholder="结束时间" clearable
                        style="width: 220px" @change="timeChange" />
                </el-form-item>
                <el-form-item label="待办类型" prop="configCode">
                    <el-select v-model="queryParams.configCode" placeholder="请选择归还状态" clearable style="width: 220px">
                        <el-option v-for="dict in returnStatusList" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
            </el-form>
            <div class="form_button">
                <el-button type="primary" @click="handleQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
            </div>
        </searchrevealing>
        <el-card shadow="never">
            <template #header>
                <!-- <el-col :span="1.5">
                    <el-button type="warning" plain icon="Download" @click="handleExport">导出</el-button>
                </el-col> -->
                <right-toolbar v-model:showSearch="showSearch" @queryTable="getList" :name="'消息通知'"
                    @updateColumn="getColmun"></right-toolbar>
            </template>
            <el-table :data="tableData" border @header-dragend="dragEnd">
                <el-table-column label="序号" type="index" width="55" align="center" :fixed="true" />
                <el-table-column v-for="(item, index) in outBoundRecordColumns" :key="index" :label="item.label"
                    align="center" :prop="item.prop" show-overflow-tooltip :fixed="item.fixed" :width="item.width">
                    <template #default="scope">
                        <div v-if="item.prop == 'content'">
                            <el-badge v-if="scope?.row.handleStatus == 0" is-dot
                                :badge-style="{ top: '50%', left: '-10px', transform: 'translate(0, -100%)' }">
                                {{ scope.row.content }}
                            </el-badge>
                            <span v-else>{{ scope.row.content }}</span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
                    <template #default="scope">
                        <el-button link type="primary" v-if="scope?.row.handleStatus == 0" @click="dispose(scope.row)"
                            class="color_theme">去处理</el-button>
                        <el-button link type="primary" v-if="scope?.row.handleStatus == 1" @click="look(scope.row)"
                            class="color_theme">去查看</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize" @pagination="paginationChange" />
        </el-card>
        <!-- 商品入库信息核对  -->
        <goodswarehousing @doClose="goodswarehousingClose" :goodswarehousingVisible="goodswarehousingVisible"
            :goodswarehousingData="goodswarehousingData" :look="isLook"></goodswarehousing>
        <!-- 接收 -->
        <commodityHistorydetails type="await" @doClose="commoditymodifyClose"
            :commoditydetailsData="commoditydetailsData" :dialogInfoVisible="dialogInfoVisible" :look="isLook">
        </commodityHistorydetails>
    </div>
</template>



<script setup name="OutBoundRecord" lang="ts">
import { ref } from 'vue'
import { queryDeptMsg, readHandle } from '@/api/basic/flowable/index'
import { getStockPcList } from '@/api/group/productOutbound/index'
import { getPricingById } from '@/api/group/productSelectionPricing'
import goodswarehousing from '@/views/group/productOutbound/components/goodswarehousing.vue';
import commodityHistorydetails from '@/views/group/bainPriceAccept/historyParticulars.vue'
import { listColumn } from '@/api/system/column';
import useUseNotice from '@/store/modules/notice';


const useNotice = useUseNotice();
const goodswarehousingVisible = ref(false)
const queryFormRef = ref<ElFormInstance>();
const { proxy } = getCurrentInstance() as any;
const loading = ref(false)
const isLook = ref('')
const tableData = ref<any>([])
const total = ref(0)
const showSearch = ref(true);
const columnData = ref()
const queryParams = ref({
    pageNum: 1,
    pageSize: 10,
    startTime: '',
    endTime: '',
    type: 0,
    time: [],
    configCode: ''
})
const goodswarehousingData = ref<any>({})
const dialogInfoVisible = ref(false)
const commoditydetailsData = ref<any>()
const returnStatusList = ref<any>([
    { label: '入库待办', value: '8' },
    { label: '变价待办', value: '7' },
])
const outBoundRecordColumns = ref()

/** 搜索按钮操作 */
const handleQuery = () => {
    queryParams.value.pageNum = 1;
    useNotice.QueryDeptCount()
    getList();
};

/** 重置按钮操作 */
const resetQuery = () => {
    queryFormRef.value?.resetFields();
    queryParams.value.startTime = ''
    queryParams.value.endTime = ''
    handleQuery();
};
/** 商品入库关闭 */
const goodswarehousingClose = () => {
    goodswarehousingVisible.value = false
    useNotice.QueryDeptCount()
    getList()
}
// 去接收关闭
const commoditymodifyClose = () => {
    dialogInfoVisible.value = false;
    useNotice.QueryDeptCount()
    getList()
}
// 时间选择
const timeChange = (val: any) => {
    if (val) {
        queryParams.value.startTime = val[0]
        queryParams.value.endTime = val[1]
    } else {
        queryParams.value.startTime = ''
        queryParams.value.endTime = ''
    }
}
// 获取代办消息列表
const getList = async () => {
    loading.value = true
    try {
        const res = await queryDeptMsg(queryParams.value)
        tableData.value = res.rows
        total.value = res.total
        loading.value = false
    } catch (error) {
        loading.value = false
    }
}
// 点击去处理
const dispose = async (row: any) => {
    // try {
    //     if (row.handleStatus == 0) {
    //         loading.value = true
    //         await readHandle({ code: row.code })
    //         useNotice.QueryDeptCount()
    //         let index = tableData.value.findIndex((item: any) => item.code == row.code)
    //         if (index != -1) {
    //             tableData.value[index].handleStatus = 1
    //         }
    //         loading.value = false
    //     }
    // } catch (e) {
    //     loading.value = false
    // }

    if (row.templateCode == '8') {
        loading.value = true
        try {
            const res: any = await getStockPcList({ id: row.businessCode });
            goodswarehousingData.value = res.rows[0]
            goodswarehousingData.value.contractSellName = await contractNameByType('供销合同', goodswarehousingData.value.contractList)
            goodswarehousingData.value.contractDiscountName = await contractNameByType('破价合同', goodswarehousingData.value.contractList)
            goodswarehousingData.value.marginName = await contractNameByType('保证金协议', goodswarehousingData.value.contractList)
            isLook.value = ''
            goodswarehousingVisible.value = true
            loading.value = false
        } catch (error) {
            loading.value = false
        }
    }
    if (row.templateCode == '7') {
        loading.value = true
        try {
            const res: any = await getPricingById({ id: row.businessCode });
            res.data.changeHmMechanismsListsOne = JSON.parse(row.extend).changeHmMechanismsListsOne
            commoditydetailsData.value = res.data
            isLook.value = ''
            dialogInfoVisible.value = true;
            loading.value = false
        } catch (error) {
            loading.value = false
        }
    }
    // if (row.templateCode == '12') {
    //     loading.value = true
    //     try {
    //         const res: any = await getPricingById({ id: row.businessCode });
    //         res.data.changeHmMechanismsListsOne = JSON.parse(row.extend).changeHmMechanismsListsOne
    //         commoditydetailsData.value = res.data
    //         isLook.value = ''
    //         dialogInfoVisible.value = true;
    //         loading.value = false
    //     } catch (error) {
    //         loading.value = false
    //     }
    // }
}
const look = async (row: any) => {
    if (row.templateCode == '8') {
        loading.value = true
        try {
            const res: any = await getStockPcList({ id: row.businessCode });
            goodswarehousingData.value = res.rows[0]
            goodswarehousingData.value.contractSellName = await contractNameByType('供销合同', goodswarehousingData.value.contractList)
            goodswarehousingData.value.contractDiscountName = await contractNameByType('破价合同', goodswarehousingData.value.contractList)
            goodswarehousingData.value.marginName = await contractNameByType('保证金协议', goodswarehousingData.value.contractList)
            isLook.value = 'look'
            goodswarehousingVisible.value = true
            loading.value = false
        } catch (error) {
            loading.value = false
        }
    }
    if (row.templateCode == '7') {
        loading.value = true
        try {
            const res: any = await getPricingById({ id: row.businessCode });
            res.data.changeHmMechanismsListsOne = JSON.parse(row.extend).changeHmMechanismsListsOne
            commoditydetailsData.value = res.data
            isLook.value = 'look'
            dialogInfoVisible.value = true;
            loading.value = false
        } catch (error) {
            loading.value = false
        }
    }
}
/** 根据合同类型获取合同名称 */
const contractNameByType = async (type: string, row: any) => {
    if (row) {
        const rows = row.filter((item: any) =>
            item.contractType == type
        )
        if (rows.length > 0) {
            if (type == '供销合同') {
                goodswarehousingData.value.contractSellOssId = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile
            } else if (type == '破价合同') {
                goodswarehousingData.value.contractDiscountOssId = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile
            } else if (type == '保证金协议') {
                goodswarehousingData.value.marginNameUrlssId = import.meta.env.VITE_APP_PIC_URL + rows[0].contractFile
            }
            return rows[0].fileName
        } else {
            return '-'
        }
    } else {
        return '-'
    }
}

/** 获取colmun */
const getColmun = async () => {
    const columnDatas = await proxy?.useColumn('消息通知')
    outBoundRecordColumns.value = columnDatas.columnCustom
    columnData.value = columnDatas
    queryParams.value.pageSize = columnDatas.columnPageSize || 10
}
/** 页数变化 */
const paginationChange = async () => {
    await getList();
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
    getColmun()
}
/** 拖拽事件 */
const dragEnd = async (newWidth: number, oldWidth: number, column: any, event: MouseEvent) => {
    columnData.value.columnCustom.map((item: any) => {
        if (item.prop == column.property) {
            item.width = newWidth
        }
    })
    await proxy?.useColumnUpdate(columnData.value, queryParams.value.pageSize)
}
onMounted(async () => {
    await getColmun();
    getList()
})

</script>
<style lang="scss" scoped>
.mb96 {
    margin-bottom: 96px;
}

:deep(.el-card__header) {
    display: flex;
    justify-content: flex-end;
}

.form_button {
    display: flex;
    justify-content: flex-end;
}
</style>